<template>
  <div class="page-container">
    <div class="sidebar-container">
      <Sidebar/>
    </div>
    <div class="content-container">
      <el-table
          :data="tableData"
          style="width: 100%; "
          :row-class-name="tableRowClassName"
      >
        <el-table-column prop="stationId" label="序号" width="180"/>
        <el-table-column prop="stationName" label="站点名称" width="180"/>
        <el-table-column prop="location" label="站点区域" width="180"/>
        <el-table-column prop="capacity" label="站点容量" width="180"/>
        <el-table-column prop="createdAt" label="创建时间" width="180"/>
        <el-table-column prop="updatedAt" label="状态更新时间"/>
        <el-table-column prop="status" label="状态" width="100" align="center"/>
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>


<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import Sidebar from "../components/Sidebar.vue";
import {useRouter} from 'vue-router';
import request from '../utils/request.js'

// 初始化路由实例
const router = useRouter();

// 使用ref定义响应式数据
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取站点列表数据
const fetchStationList = async () => {
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    };
    const response = await request.get('/station/query', {params});
    if (response.data.code === 1) {
      const {records, total: totalCount} = response.data.data;
      tableData.value = records;
      total.value = totalCount;
    } else {
      console.error('获取数据失败:', response.data.message);
    }
  } catch (error) {
    console.error('获取站点列表失败:', error);
  }
};

// 处理每页显示数量变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchStationList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchStationList();
};

// 带状态设置 rowindex 表单第一项为0
const tableRowClassName = ({row, rowIndex}) => {
  if (rowIndex === 1) {
    return 'warning-row';  // 自定义的行样式，可以根据条件设置不同的样式
  } else if (rowIndex === 3) {
    return 'success-row';
  }
  return '';
};

// 查看操作
const handleView = (row) => {
  router.push({
    name: 'station-info',
    params: {id: row.stationId}
  });
};

// 删除操作
const handleDelete = (row) => {
  console.log('删除站点:', row);
  // 在这里你可以添加处理删除的逻辑，例如发送删除请求到后端
};

// 组件挂载时自动获取数据
onMounted(() => {
  fetchStationList();
});
</script>

<style scoped>
.page-container {
  display: flex;
  height: calc(100vh - 120px);
}

.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.el-table {
  flex: 1;
}

.el-table .el-table__row {
  height: 60px;
}

.el-table .cell {
  padding: 8px 12px;
}

.pagination-container {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.table {
  display: flex;
  flex-direction: column;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
